<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>国家公园分布</title>
   <script src="https://cesium.com/downloads/cesiumjs/releases/1.85/Build/Cesium/Cesium.js"></script>
   <style>
     @import url('https://cesium.com/downloads/cesiumjs/releases/1.85/Build/Cesium/Widgets/widgets.css');
     html,
     body,
     #cesiumContainer {
       width: 100%;
       height: 100%;
       margin: 0;
       padding: 0;
       overflow: hidden;
     }
     .cesium-tooltip {
       position: absolute;
       z-index: 2;
       padding: 10px;
       background: linear-gradient(
         to right,
         rgba(0, 123, 255, 0.75),
         rgba(0, 80, 160, 0.75)
       );
       color: white;
       border-radius: 5px;
       pointer-events: none;
       display: none;
       transform: translate(
         -50%,
         -100%
       ); /* 这个属性使悬浮提示位于点位居中、 朝上的位置 */
     }
   </style>
 </head>
 <body>
   <div id="cesiumContainer"></div>
   <script>
     Cesium.Ion.defaultAccessToken =
       'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzZmM4MWYwYS0xOWM3LTQ0ZWEtYTUzNC1mMWI3ODAyODA1ZmYiLCJpZCI6NDQ2OTEsImlhdCI6MTYxNDI0NDk1OX0.5wce5JelLgCOVQ513YI9QtLDuqTA_L9Y0u_s2oFkWR4'

     const viewer = new Cesium.Viewer('cesiumContainer')

     let billboards = viewer.scene.primitives.add(
       new Cesium.BillboardCollection()
     )

     const nationalParks = [
       { name: '九寨沟国家公园', lat: 33.2554, lon: 103.918 },
       { name: '黄山国家公园', lat: 30.1313, lon: 118.1689 },
       { name: '张家界国家森林公园', lat: 29.3456, lon: 110.4859 },
       { name: '武陵源风景区', lat: 29.3472, lon: 110.5485 },
       { name: '亚丁自然保护区', lat: 29.0572, lon: 100.1852 },
       { name: '庐山国家公园', lat: 29.5803, lon: 116.0296 },
       { name: '神农架国家公园', lat: 31.592, lon: 110.4872 },
       { name: '武夷山', lat: 27.7271, lon: 117.6783 },
       { name: '长白山国家自然保护区', lat: 42.0116, lon: 128.0588 },
       { name: '普达措国家公园', lat: 27.8267, lon: 99.9885 },
     ]

     class Tooltip {
       constructor(container) {
           this.container = container
           console.log(document,'漱口水看看书');
           
           this.tooltip = document.createElement('div')
           this.tooltip.className = 'cesium-tooltip'
           this.container.appendChild(this.tooltip)
       }

       show(content, position) {
         this.tooltip.style.display = 'block'
         this.tooltip.style.left = `${position.x}px`
         this.tooltip.style.top = `${position.y - 20}px` // 20px offset to position above the cursor
         this.tooltip.innerHTML = content
       }

       hide() {
         this.tooltip.style.display = 'none'
       }
     }

     class CesiumEventHandler {
       constructor(viewer, tooltip) {
         this.viewer = viewer
         this.tooltip = tooltip
         this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)

         this.initEventHandlers()
       }

       initEventHandlers() {
         this.handler.setInputAction(
           this.handleMouseMove.bind(this),
           Cesium.ScreenSpaceEventType.MOUSE_MOVE
         )
       }

       handleMouseMove(movement) {
         const pickedObject = this.viewer.scene.pick(movement.endPosition)
         if (Cesium.defined(pickedObject) && pickedObject.primitive instanceof Cesium.Billboard) {
           this.viewer.canvas.style.cursor = 'pointer'
           const name = pickedObject.id.data.name
           const canvasPosition = movement.endPosition
           this.tooltip.show(name, canvasPosition)
         } else {
           this.viewer.canvas.style.cursor = 'default'
           this.tooltip.hide()
         }
         this.viewer.scene.requestRender()
       }
     }

     const tooltip = new Tooltip(document.getElementById('cesiumContainer'))
     const cesiumEventHandler = new CesiumEventHandler(viewer, tooltip)

     const addBillboard = (visibility = true) => {
       nationalParks.forEach((park, i) => {
         const billboard = billboards.add({
           position: Cesium.Cartesian3.fromDegrees(park.lon, park.lat),
           image: '../assets/vue.svg',
           scale: 0.4, // Adjust scale to maintain image quality
           show: visibility,
           id: {
             data: {
               name: park.name,
               description: 'National Park ' + i,
             },
           },
         })
       })
       viewer.scene.requestRender()
     }

     addBillboard()

     // Center the camera on Lushan National Park
     const lushanCoordinates = {
       lat: 29.5803,
       lon: 116.0296,
       height: 2915000, // Adjust height to get a better view
     }

     viewer.camera.setView({
       destination: Cesium.Cartesian3.fromDegrees(
         lushanCoordinates.lon,
         lushanCoordinates.lat,
         lushanCoordinates.height
       ),
       orientation: {
         heading: Cesium.Math.toRadians(0.0), // Heading in degrees
         pitch: Cesium.Math.toRadians(-90.0), // Pitch in degrees
         roll: 0.0, // Roll in degrees
       },
     })
   </script>
 </body>
</html>

